<template>
	<view style="height: 108rpx">
		<view class="tab-content">
			<slot />
		</view>
		<view class="tabbar">
			<view class="navigator">
				<view ref="warpper" class="warpper">
					<view ref="navItem" class="navigator-item" v-for="(item, index) in tabBar" :key="item.pagePath"
						@click="switchTab(item, index)" :data-index="index">
						<img :src="base.PHPimgUrl + item.iconPath" class="icon" v-if="selectedIndex !== index" />
						<img :src="base.PHPimgUrl + item.selectedIconPath" class="icon" v-else />
						<text class="item-text" :class="selectedIndex === index && 'text-active'">
							{{ item.text }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import base from "@/common/baseURL.js";
const props = defineProps({
	selectedIndex: {
		type: Number,
		default: 0,
	},
});
const tabBar = [
	{
		pagePath: "/pages/main/main",
		iconPath: "tab_ban_img.png",
		selectedIconPath: "tab_home_pre.png",
		text: "卷卷助手",
	},
	{
		pagePath: "/pages/selection/selection",
		iconPath: "tab_selection_nor.png",
		selectedIconPath: "tab_selection_pre.png",
		text: "卷卷选品",
	},
	{
		pagePath: "/pages/shop/shop",
		iconPath: "tab_shop_nor.png",
		selectedIconPath: "tab_shop_pre.png",
		text: "卷卷商城",
	},
	{
		pagePath: "/pages/mine/mine",
		iconPath: "tab_mine_nor.png",
		selectedIconPath: "tab_mine_pre.png",
		text: "个人中心",
	},
];
const switchTab = (item, index) => {
	const userInfo = uni.getStorageSync("userInfo") || {};
	const whiteList = uni.getStorageSync("whiteList") || [];
	const isOpen = uni.getStorageSync("isOpen") || 0;
	console.log(whiteList, userInfo.id);
	// 卷卷商城跳转
	if (index === 2) {
		if (!userInfo.id) {
			uni.reLaunch({
				url: "/pages/login/wxlogin",
			});
		} else if (isOpen && whiteList.findIndex((id) => id == userInfo.id) < 0) {
			// 开启白名单
			uni.showToast({
				title: "即将上线，敬请期待",
				icon: "none",
			});
		} else {
			uni.switchTab({
				url: item.pagePath,
			});
		}
		return;
	}
	uni.switchTab({
		url: item.pagePath,
	});
};
</script>

<style>
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 108rpx;
	z-index: 999;
	background: #fff;
	padding: 0 26rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	box-shadow: 0rpx -4rpx 6rpx 2rpx rgba(0, 0, 0, 0.1);
}

.navigator {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.warpper {
	display: flex;
	justify-content: space-between;
	width: auto;
	transition-timing-function: ease-out;
}

.navigator-item {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex: auto;
	height: 100%;
}

.item-text {
	margin-top: 6rpx;
	color: #bcbcd6;
	font-size: 22rpx;
}

.text-active {
	color: #7f7fe9 !important;
}

.icon {
	width: 52rpx;
	height: 52rpx;
}
</style>